<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>开关 | 表单</title>
    <link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_switch.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>开关</dd>
			<dt>描述：</dt>
			<dd>将复选框封装成开关样式，增强可视化效果；可在表单中直接通用，通过复选框是否选中即可获值。</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>basic_font.css</code>
				<code>form_switch.css</code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
		<label class="o-switch">
			<input type="checkbox">
			<span class="o-switch-base"></span>
		</label>
		<label class="o-switch">
			<input type="checkbox" checked>
			<span class="o-switch-base"></span>
		</label>
		<label class="o-switch">
			<input type="checkbox" disabled>
			<span class="o-switch-base"></span>
		</label>
		<label class="o-switch">
			<input type="checkbox" checked disabled>
			<span class="o-switch-base"></span>
		</label>
		<button style="margin-left:20px" onclick="getChecked()">获取状态</button>
		<pre id="result"></pre>
	</div>
	<script>
		var ckboxs = document.querySelectorAll('input[type="checkbox"]'),
			result = document.getElementById('result');

		function getChecked() {
			var arr = [];

			for (var i = 0; i < ckboxs.length; i++) {
				arr.push(String(ckboxs[i].checked));
			}

			result.innerHTML = arr.join(' | ');
		}
	</script>
</body>
</html>
